
import { define , WeElement } from 'omi';

import { get, createOrder, toastSuccess, toastErr } from '../../../utils/util'

import './index.css'
import api from '../../../api/api';

define('index', class extends WeElement{
    config={
      navigationBarTitleText:"美食"
    }
    data = {
        listData:[],
        obj:{},
        activeIndex:'',
        toView:'',
        image:{     // 图片
            cartW : require('../../../images/cart-w.png'),
            add : require('../../../images/add.png'),
            dec : require('../../../images/dec.png'),
        },
        cart:{},
        sumMonney:0,
        totalPiece:0,
        showCart:false,
        hasHeight:false,
        spvalue:[],
        length:0,
      moneynum:1,
      namelist:[],
      selectindx:0,
    }
 
    install(){
      get(api.ShopfoodUrl).then((result) => {
        this.data.spvalue = result.data//两个数组，
        // this.update();
        for(let i=0;i<result.data.length;i++){
          console.log('aaaa')
          get(api.ShopfoodlistUrl, { spvalue_id: result.data[i].spvalue_id }).then((res) => {
            result.data[i].list = res.data
            console.log(result.data[i])
            this.data.listData = result.data[i]
            this.update();
            
            //创建节点选择器
            const query = wx.createSelectorQuery();
            //选择 所有标签
            query.selectAll('.content').boundingClientRect()
            query.exec( (res)=>{
                const h = res[0].map((item)=> item )
                console.log(h,"h")
                this.update({
                    h: h
                })
            })

          })
        }
        
      })
     
    }
    selectMenu = (e) =>{
        console.log(e.currentTarget.dataset);
        let { index } = e.currentTarget.dataset;

        this.data.activeIndex = index ;
        this.data.toView = 'a'+ index;
        this.data.selectindx=index;
        this.update();
    }
    addCart = (e) =>{
      console.log(e)
      let { lidx, money,name} = e.currentTarget.dataset;
        // e.currentTarget
      let item = this.data.spvalue[this.data.selectindx].list[lidx];//遍历购物车
      console.log(item,"item ")
      if (!this.data.cart[item.goods_id] ){
            item.number = 1;
          this.data.cart[item.goods_id] = item;
        }else{
          this.data.cart[item.goods_id].number += 1 ;
        }
      console.log(this.data.cart, "cart")
        
        
      this.data.sumMonney += Number(money * (this.data.moneynum));
      this.data.totalPiece++;
        this.data.toView = ''
        this.update();
    }
    showCart = (e)=>{
        this.update({
            showCart:true,
            toView:''
        })
    }
    hideCart = ()=>{
        this.update({
            showCart:false,
            toView:''
        })
    }
    addNumber = (e) =>{
        let { id } = e.currentTarget.dataset;
      console.log(e.currentTarget.dataset)
        this.data.cart[id].number++;
        this.data.totalPiece++;
      this.data.sumMonney += Number (this.data.cart[id].goods_price) ;
        this.update();
    }
    decNumber = (e) =>{
        let { id } = e.currentTarget.dataset;
        console.log(id)
        this.data.cart[id].number--;
      console.log(this.data.cart[id].number)
        this.data.totalPiece--;
      this.data.sumMonney -= Number(this.data.cart[id].goods_price) ;
        if(this.data.cart[id].number == 0){
           delete this.data.cart[id]
        }
        this.update();
    }
  clearCart = () => {
    this.data.cart = {};
    this.data.namelist = [];
    this.data.sumMonney = 0;
    this.data.totalPiece = 0;
    this.data.showCart = false;
    this.update();
  }

    scroll = (evt) =>{
        let scrollTop = evt.detail.scrollTop;
        if(this.data.toView!=''){
            this.update({toView:''})
        }
      console.log(evt.detail.scrollTop)
        this.data.h.forEach( (ele,idx) => {
            if( scrollTop > ele.top-100 && scrollTop < ele.bottom ){
                this.data.activeIndex = idx;
                this.update();
            }
        });
      console.log(this.data.h, "h")
    }
    toDetail = (evt) =>{
      let { id, comid} = evt.currentTarget.dataset;
        wx.navigateTo({
          url: `../detail/index?id=${id}&comid=${comid}`,
        });
        console.log(evt,"e")
      
    }
  selectInfo=()=>{
    console.log("123")
  }
    render(){
      let { image, spvalue, listData , activeIndex , sumMonney , totalPiece , cart } = this.data;
        return (
        <view>
            {/* 左侧菜单 */}
            <view class="list-left-menu">
              {spvalue.map( (listItem,listIdx)=>(
                    <view   class={[ listIdx==activeIndex?'list-left-menu-box-selected':'list-left-menu-box-unselect'  ]} data-index={listIdx} bindtap='selectMenu'>
                  <view class="list-menu-name">{listItem.spvalue_name}</view>
                    </view>
                ) )}
            </view>
            {/* 右侧菜单  */}
            <scroll-view scroll-y="true" class='list-view'  bindscroll="scroll" scroll-into-view={toView} scroll-with-animation='true' >
              {spvalue.map( (listItem,listIdx)=>(
                    <view class="content">
                  <view class='list-tab' id={'a' + listIdx}  >{listItem.spvalue_name}</view>
                  {
                    listItem.list.map((foodItem, listIdx)=>(
                      <view class='content-list' bindtap='toDetail' data-i={listIdx} data-id={foodItem.goods_id} data-comid={foodItem.goods_commonid}>
                        <view class='list-image-box'>
                          <image class="list-image" mode="widthFix" src={foodItem.goods_image}></image>
                        </view>

                        <view class='issue-name'>
                          <view>{foodItem.goods_name}</view>
                          <view style='margin-top:20rpx;color:#F05A86'>
                            ¥ {foodItem.goods_price}
                            <i class="iconfont icon-jiahao2fill plus-icon" bindtap="selectInfo"></i>
                            <view class='item-add' catchtap='addCart' data-lidx={listIdx} data-money={foodItem.goods_price} data-name={foodItem.goods_name}><image src={image.add}></image></view>
                          </view>

                        </view>
                      </view>
                    ))
                  }
                   
                    
                    </view>
                ))}
            </scroll-view>
            {/*   底部操作菜单 */}
            <view class="operate-bar" >
                <view class='cart'>
                    <view style='padding:5px;display:flex' bindtap='showCart'>
                        <view class='cart-icon' ><image src={image.cartW}></image></view>
                        
                        <view class='cart-price'   > 
                           <view>&yen; {sumMonney.toFixed(2)}</view> 
                           <view>数量 {totalPiece}件</view> 
                        </view>
                    </view>
                    </view>
                    <view class={["submit-btn" , sumMonney!=0?'activity-color-bg':'' ]} bindtap='goBalance'>
                        <view class={["submit-btn-label" , sumMonney!=0?'color-white':''  ]}>支付</view>
                    </view>
            </view>
            {/* 购物车 */}
            {showCart?(
            <view class="drawer_screen" data-statu="close"   >
                <view class="mask" bindtap="hideCart" ></view>
                <view class="cartlist-float" >
                    <view style='background:#F0F0F0;height:30px'>
                        <label class='label-cart-bar'>
                        <label style='padding:5px'>已选商品</label>
                        </label>
                        <label class='icon-clear' bindtap='clearCartList'>
                        <i class="iconfont icon-lajitong"></i>
                        <label class="label-clear" bindtap={clearCart}>清空购物车</label>
                        </label>
                    </view>

                    {totalPiece?( 
                        <scroll-view scroll-y="true" class="{{cartList.length>5?'cart-scroll-list':''}}" >
                            { cart.map((cartItem,cartIdx)=>(
                                <view class='cart-list-box'  style='border-bottom:1px #E3E3E3 solid' >
                                    <view class='list-info'>
                            <view class='cart-item-name'>{cartItem.goods_name}</view>
                            <label >¥ {(cartItem.goods_price*cartItem.number)}</label>
                                        <view class='cart-item-action'>
                              <view class='cart-dec' ><image src={image.dec} data-id={cartItem.goods_id} bindtap="decNumber" /></view>
                                            <view >{cartItem.number}</view>
                              <view class='cart-add' ><image src={image.add} data-id={cartItem.goods_id} bindtap="addNumber" /></view>
                                        </view>
                                            
                                    </view>
                                </view>
                            )) 
                            }
                        </scroll-view>
                     ) : (<view class='cartEmpty' > 购物车空空如也~~~ </view>)}
                </view>
            </view>):<view></view>}
        </view> 

        )
    }
})